Shinydashboard: Extensions

Before we start…

Your project: code it progressively & continuously! Ask me questions along the way. Next session is about deployment: it’s better if you have an app to deploy :)

About the next sessions… :
- S5 (today): dense but ok
- S6 (next time): light! (cond. format & deployment) \(\rightarrow\) time to help on projects.
- S7: Geocomputing & Twitter example: API & text mining
- S8: Modelling / case study

About the exercises: usually the outcome is pretty ugly. They are intended to make you practice! Up to you to make YOUR project look good!

Idea: post for the best app(s).

Back to UI & Server

Common issues

Commas & brackets! => use Cmd + I (mac) or Ctrl + I (PC) to indent.

INDENTATION !!!

COMMAS (and brackets) !!!

Dialog: sidebar to server

Dialog :server to body

The full cycle (one last time)

Organizing the dashboard app: simple structures

Rows and columns

Columns: 12 units in what is called the Bootstrap grid system.

In shiny(dashboard), most width are computed on this scale (versus pixels). Sometimes, pixels are available.

Embed in rows

Via fluidRow()!

Embed in rows: syntax I

dashboardBody(
  fluidRow(
    column(6,valueBoxOutput("box1", width = 12)),
    column(6,infoBoxOutput("box2", width = 12))
  )
)

Embed in rows: syntax II

Inside the sidebar.

fluidRow(
  column(6, checkboxGroupInput("season", h4("Season"),               
                               choices = list("Summer" = "Summer", 
                                              "Winter" = "Winter"),
                               selected = c("Summer", "Winter"))
  ),
  column(6, checkboxGroupInput("gender", h4("Gender"),               
                               choices = list("Women" = "Women", 
                                              "Men" = "Men"),
                               selected = c("Women", "Men"))
  )
)

Tables

The DT (DataTable) package! You can customize the number of rows. \(\rightarrow\) Test the search feature!
More options:
https://rstudio.github.io/DT/shiny.html
https://rstudio.github.io/DT/options.html

output$pt <- DT::renderDataTable({data()}, 
                                 options = list(   
                                   lengthMenu = list(c(5, 12, 19), c('5', '12', '19')),   
                                   pageLength = 5  
                                 ))

Tabs: example

Tabs: code

dashboardBody(
  tabBox(
    title = "Results", height = "920px", width = 12,  # Width in bootstrap, height in px
    tabPanel("Countries through time", 
             plotOutput("plot", height = 300),
             DT::dataTableOutput("pt")
    )
  )

Menus: example

Menus show info in the body OR in the sidebar, but not in both!
Resources:
https://rstudio.github.io/shinydashboard/behavior.html
https://rstudio.github.io/shinydashboard/get_started.html

Menus: code

dashboardSidebar( 
        sidebarMenu(
            menuItem("Plot", tabName = "plot", icon = icon("images", lib = "font-awesome")),
            menuItem("Table", tabName = "table", icon = icon("table", lib = "font-awesome"))
        )
    ),

dashboardBody(
  tabItems(
            tabItem(tabName ="plot", 
                        plotOutput("plot", height = 300)
            ),
            tabItem(tabName ="table", 
                    DT::dataTableOutput("pt")
            )
  )
)

Part of the code is located in the Sidebar (layout), and part in the body (content). The link is the tabName.

Menus: simplify the sidebar

menuItem("Display options",
         numericInput("max_country", h4("Max number countries"), 
                      min = 2, max = 12, step = 1, value = 6)
)

Navbar

The code stacks panels with proper names and then displays some object. Below, the objects plot, pt and text are defined in the server.

# Inside the body
navlistPanel(
  "Stuff A",
  tabPanel("Graph 1", plotOutput("plot")),
  tabPanel("Table 2", DT::dataTableOutput("pt")),
  "Header B",
  tabPanel("Text 3", h1(textOutput("text"))),
  tabPanel("Component 4"),
  "-----",
  tabPanel("Component 5"),
  widths = c(2,10)
)

Navbars are usually used in pure Shiny (not in shinydashboards). They are a bit redundant with sidebars.

The reference pages for dashboard structure

for dashboard structure: https://rstudio.github.io/shinydashboard/structure.html Notably, I have not mentioned simple “boxes” which can wrap some content…
for dahsboard appearance: https://rstudio.github.io/shinydashboard/appearance.html

Formatting: going further

Boxes for KPIs

infoBox & valueBox!

From server with renderInfoBox() \(\rightarrow\) to UI via infoBoxOutput()
From server with renderValueBox() \(\rightarrow\) to UI via valueBoxOutput()

Boxes: syntax

output$box1 <- renderValueBox({
  olympics <- data()
  valueBox(
    value = sum(olympics$Medal=="Gold"), 
    subtitle =  "Gold", 
    icon = icon("medal", lib = "font-awesome"),
    color = "yellow"
  )
})

Plotly is back: fully integrable into shiny

It’s always better to resort to plotly: https://plot.ly/r/ It’s incredibly simple and very effective!
1. In the server: renderPlot() \(\rightarrow\) renderPlotly()
2. In the server, save the ggplot in a variable and then use ggplotly()
3. In the UI (body): plotOutput() \(\rightarrow\) plotlyOutput()

library(plotly)
g <- ggplot(diamonds, aes(x = color, fill = color)) + geom_bar()
ggplotly(g)

What are your questions?

A ‘bad’ question is better than no question (there are no bad questions).

Even the best make errors: https://twitter.com/hadleywickham/status/1188516615635324928?s=11

Next week is the last pure Shiny session: make progress if you want me to help you!

Also, I will talk about app online deployment. If you don’t have an app that works, use one from the course.